<template>
    <div class="content">
        <div class="date">
            <span>{{ this.date1 }}</span>
            |
            <span>{{ this.datatime }}</span>
            |
            <span><font-awesome-icon class="icon-sun" :icon="['fas', 'sun']" />{{ this.temp }}&deg;</span>
            |
            <span>空气&nbsp;{{ this.air }}</span>
        </div>
    </div>
</template>

<script>
import Axios from 'axios'
export default {
    name: 'RightTime',
    data() {
        return {
            weatDate: [],
            temp: '', //今天的温度
            air: '', //空气质量
            date1: '',
            datatime: '',
        }
    },
    methods: {
        weather() {
            Axios.get('https://v0.yiketianqi.com/api?version=v62&appid=63816325&appsecret=S7FiLf9A&city=三亚').then(
                (res) => {
                    this.weatDate = res.data
                    this.air = res.data.air_level
                    this.temp = res.data.tem
                }
            )
        },
        currentTime() {
            setInterval(this.date, 1000)
        },
        date() {
            var dt = new Date() // date = 1567760101781; 毫秒数
            var y = dt.getFullYear().toString()
            var m = (dt.getMonth() + 1).toString().padStart(2, '0')
            var d = dt.getDate().toString().padStart(2, '0')
            var hh = dt.getHours().toString().padStart(2, '0')
            var mm = dt.getMinutes().toString().padStart(2, '0')
            var ss = dt.getSeconds().toString().padStart(2, '0')
            this.date1 = y + '-' + m + '-' + d
            this.datatime = hh + ':' + mm + ':' + ss
        },
    },
    mounted() {
        this.weather()
        this.date()
        this.currentTime()
    },
}
</script>

<style lang="less" scoped>
.content {
    width: 350px;
    height: 60px;
    padding-right: 15px;
    .date {
        width: 100%;
        height: 60px;
        line-height: 80px;
        text-align: center;
        color: #fff;
        font-size: 18px;
        overflow: hidden;
        .icon-sun {
            color: rgb(243, 243, 89);
        }
    }
}
</style>